<!--
 * @Author: richarfang
 * @Date: 2021-03-08 14:11:54
 * @LastEditTime: 2021-04-07 12:18:28
 * @LastEditors: june
 * @Description: 价格显示组件
-->

<template>
    <span class="price-container">
        <span class="price-integer" v-if="isInteger" :class="{skufFont: isFromSku}">{{ratePrice}}</span>
        <template v-else>
            <span class="price-int ET6" :class="{skufFont: isFromSku}"> {{ priceInt }}</span>
            <span class="price-float ET0" :class="{skubFont: isFromSku}">{{ priceFloat }}</span>
        </template>
    </span>
</template>

<script>
  export default {
    name: 'price',
    props: {
      amount: Number,
      isFromSku: Boolean, // 区分用于priceInfo组件还是Sku组件
    },
    computed: {
      isInteger() {
        return Number.isInteger(this.ratePrice);
      },
      ratePrice() {
        return this.isFromSku ? this.amount : this.amount / 100;
      },
      floatPrice() {
        return this.ratePrice.toFixed(2);
      },
      priceInt() {
        return this.floatPrice && this.floatPrice.slice(0, -3);
      },
      priceFloat() {
        return (this.floatPrice >= 0 && this.floatPrice.slice(-3)) || "";
      },
    },
  };
</script>

<style>
  .price-float,
  .price-int {
    color: #ff5429;
    font-weight: 500;
  }
  .skufFont {
    font-size: 0.44rem;
  }
  .skubFont {
    font-size: 0.24rem;
  }
</style>
